<template>
  <div>{{ student.name }} 已经 {{student.age}}岁了</div>
  <button @click="birthday">过生日</button>
  <hr>
  {{ msg }}
  <button @click="translate">翻译</button>
</template>


<script>
import {reactive, ref} from 'vue'
export default {
  setup () {
    // reactive 执行时传入一个普通对象, 会返回一个响应式数据对象
    const student = reactive({
      name: 'tom',
      age: 12
    })
    const birthday = () => {
      console.log('过生日');
      student.age++
    }
    
    // ref 执行时传入一个任意数据, 会返回一个响应式数据, 注意使用时如果在 script 范围内, 需要加 .value
    const msg = ref('hello world')
    const translate = () => {
      msg.value = '你好世界'
    }

    return { student, birthday, msg, translate }
  }
};
</script>